<template>
  <view>
    <view class="showimg_box">
      <view class="show_img">
        <image :src="pingjiaSrc" @tap="ChooseImage"></image>
      </view>
      <view v-for="(item, index) in imgList" :key="index" class="imgarr">
        <view class="icon-cuo" @tap="delect(index)">&#xe61a;</view>
        <image class="images" :src="item" @click="lookImg(index)"></image>
      </view>
    </view>
    <button type="primary" plain="" class="btn" @click="btn">提交</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {

        // 上传照片
        imgList: [],
        imgArr: "",
        pingjiaSrc: this.adminIp + "content/image/pingjia.png"
      }
    },
    methods: {

      //下拉框
      ChooseImage() {
        var _this = this;
        console.log(22);
        uni.chooseImage({
          count: 4, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], //从相册选择和拍照
          success: (res) => {
            console.log(res);
            var tempFilePaths = res.tempFilePaths;
            console.log(tempFilePaths);
            if (_this.imgList.length + tempFilePaths.length > _this.imgMaxNum) {
              uni.showToast({
                title: '超过上传图片的最大数量',
                icon: 'none'
              })
            } else {
              if (_this.imgList.length != 0) {
                _this.imgList = _this.imgList.concat(res.tempFilePaths);
              } else {
                _this.imgList = res.tempFilePaths;
              }
              for (var i = 0; i < tempFilePaths.length; i++) {
                let timestamp = new Date().getTime();
                let enMsg = hex_md5('@' + hex_md5('@' + timestamp + '~') + '~');
                uni.uploadFile({
                  url: this.adminIp + 'Interface/Interface/UploadImg', //上传的服务器地址
                  filePath: tempFilePaths[i],
                  method: 'POST',
                  name: "file",
                  formData: {
                    timestamp: timestamp,
                    enMsg: enMsg
                  },
                  success: res => {
                    let img = JSON.parse(res.data).data
                    _this.imgArr += img + ","
                    console.log("上传图片", _this.imgArr);
                  }
                });
              }
            }
          }
        });
      },
      //查看图片
      lookImg: function(val) {
        const urls = this.imgList
        const current = val
        uni.previewImage({
          urls,
          current
        })
      },
      delect(index) {
        uni.showModal({
          title: "提示",
          content: "是否要删除该图片",
          success: (res) => {
            if (res.confirm) {
              this.imgList.splice(index, 1)
            }
          }
        })
      },
      hex_md5(){
        console.log(hex_md5);
      },
      // 按钮事件
      btn(index) {
        let store = this.$store;
        uni.showModal({
          title: '友情提示',
          content: '您已经确定提交了吗!',
          success: function(res) {
            if (res.confirm) {
            //  console.log(this);


              uni.navigateTo({
                url:"./order"
              }),
              uni.showModal({
                title: '提交成功',
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },

    }
  }
</script>

<style scoped>
  .showimg_box {
    display: flex;
    align-items: center;
    margin-top: 20upx;
    flex-wrap: wrap;
  }

  .show_img {
    width: 150upx;
    height: 150upx;
    border: 2upx dashed #eee;
    margin: 20upx 0;
    margin-left: 30rpx;
    background-color: #DDDDDD;

  }

  .image {
    width: 100%;
    height: 100%;
    border: 2upx dashed #eee;
  }

  .images {
    width: 150upx;
    height: 150upx;
    z-index: 999;
  }

  .imgarr {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 30rpx;
  }

  .icon-cuo {
    font-family: 'iconfont';
    position: absolute;
    right: 0;
    top: 5upx;
    background: linear-gradient(90deg, rgba(251, 91, 80, 1) 0%, rgba(240, 45, 51, 1) 100%);
    color: #FFFFFF;
    z-index: 10009;
    border-radius: 50%;
  }
  
  /* 按钮 */
  .btn {
    margin-top: 100rpx;
    width: 100%;
  } 
</style>